<template>
<div id="detail">
  <el-form ref="form" :model="form" label-width="100px" size="mini">
    <el-card shadow="always" class="detail">
        <div slot="header" class="clearfix">
            <span>巡查情况</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="backtoIndex">返回</el-button>
        </div>
      <el-form-item label="所属楼宇：" prop="buildingName">
        {{form.buildingName}}
      </el-form-item>
      <el-form-item label="所属楼层：" prop="floorName">
        {{form.floorName}}
      </el-form-item>
      <el-form-item label="房间号：" prop="roomName">
        {{form.roomName}}
      </el-form-item>
      <el-form-item label="是否有人：" prop="status">
        {{form.status == 0 ? '是' : '否'}}
      </el-form-item>
      <el-form-item label="企业名称：" prop="status">
        {{form.enterpriseName}}
      </el-form-item>
      <el-form-item label="巡查时间：" prop="createTime">
        {{form.createTime}}
      </el-form-item>
      <el-form-item label="附件：">
        <el-image 
            v-for="item in form.files" :key="item.id"
            :preview-src-list="[item.response.url]"
            style="width: 100px; height: 100px; margin-right:5px"
            :src="item.response.url" >
        </el-image>
      </el-form-item>
    </el-card> 
  </el-form>
  <!-- <div class='footer'>   
    <el-button @click="backtoIndex">返回</el-button>
</div> -->
</div>
</template>

<script>
import { getItemById } from '../../api/requestForm.js'

export default {
  data () {
    return {
      loading: false,
      form: {
        // buildingName: '11',
        // floorName: '22',
        // roomName: '33',
        // status: false,
        // createTime: '',
        // files: []
      },
    }
  },
  methods: {   
    backtoIndex() {
      // this.$router.push({ path: '/' })
      this.$router.back()
    },
    getItemDetail(id) {
        getItemById(id).then(res => {
            console.log(res, 'res')
            this.form = res.data
            this.form.files = JSON.parse(res.data.files)
        })
    },
  },
  created() {
    const { id } = this.$route.query
    console.log(id)
    this.getItemDetail(id)
  },
}
</script>

<style >
html,body{
  padding: 0 !important;
  margin: 0 !important;
}
.el-card__header {    
    border-top: 5px solid rgb(84, 199, 228);
  }
</style>
<style scoped lang="less">
#detail {
  padding: 10px;
  
  .patrol {
    margin-top: 10px;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
